<template>
  <view class="login-container">

    <uni-nav-bar dark :border="false" title="个人中心" background-color="#f3c442" status-bar left-icon="left" left-text="返回"
      @clickLeft="back" />

    <!-- {{avatarUrl}} 昵称:{{nickname}} -->

    <!-- 头像昵称区域 -->
    <view class="" v-if="Object.keys(avatarUrl).length !== 0">
      <view class="top-box"
        style="display: flex;padding-top: 12px;padding-bottom: 20px;padding-left: 20px; background-color: #f3c442; ">

        <image v-if="avatarUrl" :src="avatarUrl" class="avatar" style="border-radius: 50%;width: 50px;height:50px;">
        </image>
        <view v-else class="" style="border-radius: 50%;width: 50px;height:50px;background-color: white;"></view>
        <view class="nickname" style="line-height: 45px;padding-left: 20px;font-size: 18px;font-weight: 600;">
          {{Object.keys(nickname).length === 0?'':nickname}}
        </view>

      </view>

      <!-- 下面的列表-->
      <view class="list_plane"
        style="background-color: white;border-radius: 10px;width: 93%;margin-left: 3.5%;margin-top: 5%;">
        <view class="list_address" style="padding-left:2%;padding-top:5%;   ">
          <view class="" style=" margin-left: 2%;">
            <view class="list_plane_item" @click="addresshandel"
              style="border-bottom-style: dashed;border-bottom-color: #cecece; border-bottom-width: 1px;width: 96%;display:    flex;align-items: center;padding-bottom: 5%;">
              <image style="width: 40rpx;height: 40rpx;" src="../../static/address.png"></image>
              <span style="padding-left: 3%;">地址管理</span>
              <uni-icons style="padding-left: 65.58%;" type="right" size="16"></uni-icons>

            </view>
          </view>
        </view>


        <view class="list_address" style="padding-left:2%;padding-top:5%;   ">
          <view class="" style=" margin-left: 2%;">
            <view class="list_plane_item" @click="home"
              style="border-bottom-style: dashed;border-bottom-color: #cecece; border-bottom-width: 1px;display:flex;align-items: center;                padding-bottom: 5%;width: 96%;">
              <image style="width: 40rpx;height: 40rpx;" src="../../static/order.png"></image>
              <span style="padding-left: 3%;">历史订单</span>
              <uni-icons style="padding-left: 65.58%;" type="right" size="16"></uni-icons>

            </view>
          </view>
        </view>


        <view class="list_address" style="padding-left:2%;padding-top:5%;   ">
          <view class="" style=" margin-left: 2%;">
            <view @click="logout" class="list_plane_item"
              style="display:flex;align-items: center; padding-bottom: 5%;width: 96%;">
              <image style="width: 40rpx;height: 40rpx;" src="@/static/退出登录.png"></image>
              <span style="padding-left: 3%;">退出登录</span>
              <uni-icons style="padding-left: 65.58%;" type="right" size="16"></uni-icons>

            </view>
          </view>
        </view>


      </view>



    </view>

    <view v-else class="" style="padding-top: 200px;  width: 80%; padding-left: 10%;">
      <!-- 如果只是展示用户头像昵称，可以使用 <open-data /> 组件 -->
      <view class="" style="display: flex;padding-bottom: 20px;">
        <span style="line-height: 220%;">请输入昵称：</span>
        <input class="nickname" type="nickname" :value=" Object.keys(nickname).length === 0?'':nickname  "
          @blur="bindblur" placeholder="请输入昵称"
          style="border: 1px solid #e6c55d; height:45px;width: 60%; border-radius: 10px;" />
      </view>

      <button open-type="chooseAvatar" @chooseavatar="onChooseavatar" type="primary" class="btn-login"
        style="background-color:#f3c442 ;">登录</button>
    </view>




  </view>
</template>

<script>
  import {
    getlogin
  } from '@/api/login.js'
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    name: 'loginIndex',

    data() {
      return {
        avatarUrl: '',
        nickname: ''

      };
    },
    created() {
      this.getuserInfo()
    },

    methods: {
      ...mapMutations('m_user', ['updateUrlStorage', 'updateOpenid', 'updateToken']),

      getuserInfo() {
        this.avatarUrl = JSON.parse(uni.getStorageSync('avatarUrl') || '{}')
        this.nickname = JSON.parse(uni.getStorageSync('nickname') || '{}')
      },

      home() {
        uni.navigateTo({
          url: '/pages/home/home'
        })
      },
      back() {
        uni.navigateTo({
          url: '/pages/home/home'
        })
      },
      onChooseavatar(e) {

        //  this.avatarUrl = e.detail.avatarUrl
        //  uni.setStorageSync('avatarUrl', JSON.stringify(e.detail.avatarUrl))
        this.updateUrlStorage(e.detail.avatarUrl)
        this.gettoken()
        /* uni.navigateTo({
           url: '/pages/home/home'
         }); */

      },

      gettoken() {
        var _this = this
        uni.login({
          provider: 'weixin',
          success: function success(loginRes) {
            if (loginRes.errMsg === 'login:ok') {
              console.log('-=-=-=-=loginRes-=-=-=', loginRes);
              // 获取临时登录凭证jsCode
              const jsCode = loginRes.code;

              const query = {
                code: jsCode
              }
              _this.getcode(query)
            }
          }
        });

      },

      async getcode(query) {
        const res = await getlogin(query)
        console.log(res, "res")
        this.updateToken(res.data.token)
        this.updateOpenid(res.data.openid)
        if (res.code === 1) {
          uni.navigateTo({
            url: '/pages/login/login'
          })
        }
      },

      bindblur(e) {
        console.log(e)
        // this.nickname = e.detail.value

        uni.setStorageSync('nickname', JSON.stringify(e.detail.value))
      },
      async logout() {
        // 询问用户是否退出登录
        const [err, succ] = await uni.showModal({
          title: '提示',
          content: '确认退出登录吗？'
        }).catch(err => err)

        if (succ && succ.confirm) {
          // 用户确认了退出登录的操作
          // 需要清空 vuex 中的 userinfo、token 和 address
          uni.removeStorageSync("avatarUrl")
          uni.removeStorageSync("nickname")
          uni.removeStorageSync("token")
          uni.removeStorageSync("openid")
          uni.redirectTo({
            url: '/pages/login/login'

          })
        }



      },

      //跳转到收货地址界面
      addresshandel() {
        uni.navigateTo({
          url: '/subpkg/address/address'
        })
      }
    },
  }
</script>

<style lang="scss">
  .btn-login::after {
    border: none;
  }
</style>